{% extends "global/Page.html" %}

{% load staticfiles otree_tags %}

{% block title %}
Stage 3: Counting task
{% endblock %}

{% block content %}


<!--The next line adds the task specific content, getting 	the file name through the get_or_create_task function.-->
<br>

<div class="counting-task-additional">
    <div class="additional-reached"> You stated on the previous screen that you would like to count
        {{ player.AdditionalTables }} additional table/s for the charity. </div>
    <br>
    <div class="task-container"> {{ player.get_or_create_task.html_body|safe }}</div>
    <div>Number of times 0 appears:</div>
    <input type="text" id="answer" class="offer" style="background-color: white">
    <button class="answer btn btn-outline-dark" type="button" data-feedback="false">Submit Answer</button>

    <!--<p> Tasks attempted so far: <span id="num_tasks_total">{{ player.num_tasks_total }}</span></p>-->
    <br>
    <br>
    <p> Number of <b>additional</b> tables completed: <span id="num_tasks_correct_additional">
    {{ player.num_tasks_correct_additional }}</span></p>

    <p>
        Click '<b>Submit Answer</b>' to validate your answer.
    </p>

    <p> You may stop working on the task at any time by clicking the '<b>End Task</b>' button.
        Note that you can complete up to 20 additional tables.
    </p>

</div>
<br>
<button name="finished" value="True">
    End Task
</button>

{% endblock %}

{% block scripts %}
<script>
        $(function () {
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });


        });


</script>
{% include 'realefforttask/includes/js_work_page.html' %}
{% endblock %}


{% block styles %}
<style type="text/css">
        .otree-title {
            background-color: steelblue;
            color: white;
            margin: 10px 0 10px 0;
            padding: 20px;
        }

        .otree-timer {
            display: false;
        }

        .otree-body {
            text-indent: each-line;
        }

        .box-heading {
            background-color: steelblue;
            color: white;
            margin: 10px 10px 10px 10px;
            padding: 10px 10px 10px 24px;
        }

        .table-style {
            color: black;
            margin: 10px 10px 10px 10px;
        }

        .table-borders {
            border: solid;
            border: steelblue;
            background-color: #ecf2f9;
            align-content: center;

        }

        .offer {
            background-color: whitesmoke;
            color: navy;
            padding: 1px 10px 1px 10px;
            border: groove;
            border-color: lightsteelblue;
            font-weight: bold;
            margin: 1px;
        }

        .otree-btn-next {
            background-color: steelblue;
            color: white;
            padding: 5px 10px 5px 10px;

        }

        h2, h3, h4, h5, h6 {
            font-weight: bolder;
            color: #24435c;
        }



</style>
{% endblock %}